<template>
	<view>
		<view class="flex-row">
			<view class="cat ">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="cat_scroll" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll">
					<view @click="catIndex=index" class="cat_item" v-for="(item,index) in 100">
						<text>分类名称{{item}}</text>
						<view :class="{'cat_bottom_line':true,'cat_checked':catIndex===index}"></view>
					</view>
				</scroll-view>
			</view>
			<view style="flex-grow: 1;"></view>
		</view>
		<BottomBar v-model:checkIndex='barIndex' ref="BottomBar" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categorys:[],
				barIndex:2,
				catIndex:null,
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		mounted() {
			let bottom_bar_height = this.$refs.BottomBar.$el.clientHeight
		},
		methods: {
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
		}
	}
</script>

<style lang="less" scoped>
	.cat{
		.cat_scroll{
			height: 90vh;
			.cat_item{
				&:active{
					background: #F0F0F0;
				}
				background: #f6f6f6;
				font-size: 16px;
				color: #2E2D2D;
				padding: 8px 5px;
				margin-bottom: 1px;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.cat_checked{
					background: #F927A1;
				}
				.cat_bottom_line{
					height:3px;
					width: 65%;
					margin-top: 5px;
				}
			}
		}
		min-height: 100vh;
	}
</style>
